<template>
    <view class="survey-container">
        <view class="survey-title">合资共赢调查问卷</view>

        <!-- 一、基本信息 -->
        <view class="section">
            <view class="section-title">一、基本信息</view>
            <!-- 1. 您现在的主业是？ -->
            <view class="question">
                <view class="question-text">1、您现在的主业是？（单选）</view>
                <radio-group @change="handleMainIndustryChange">
                    <label class="radioClass" v-for="industry in mainIndustries" :key="industry">
                        <radio :value="industry" />{{ industry }}
                    </label>
                    <label>
                        <radio value="other" />其他
                        <input class="inputClass" v-if="selectedMainIndustry === 'other'" v-model="otherMainIndustry" placeholder="请填写具体主业" />
                    </label>
                </radio-group>
            </view>
            <!-- 2. 您在这一行干了多久？ -->
            <view class="question">
                <view class="question-text">2、您在这一行干了多久？（单选）</view>
                <radio-group @change="handleWorkingYearsChange">
                    <label class="radioClass" v-for="years in workingYears" :key="years">
                        <radio :value="years" />{{ years }}
                    </label>
                </radio-group>
            </view>
            <!-- 3. 您的岗位角色是？ -->
            <view class="question">
                <view class="question-text">3、您的岗位角色是？</view>
                <view class="radioClass">
                    <view>➤ 岗位名称：</view>
                    <input class="inputClass" v-model="jobTitle" placeholder="如销售总监/市场经理等" />
                </view>
                <view>
                    <view>➤ 职级：</view>
                    <radio-group @change="handleJobLevelChange">
                        <label class="radioClass" v-for="level in jobLevels" :key="level">
                            <radio :value="level" />{{ level }}
                        </label>
                    </radio-group>
                </view>
            </view>
        </view>

        <!-- 二、能力与资源 -->
        <view class="section">
            <view class="section-title">二、能力与资源</view>
            <!-- 4. 您觉得自己最厉害的本事是？ -->
            <view class="question">
                <view class="question-text">4. 您觉得自己最厉害的本事是？（可多选）</view>
                <checkbox-group @change="handleStrongAbilitiesChange">
                    <label class="radioClass" v-for="ability in strongAbilities" :key="ability">
                        <checkbox :value="ability" />{{ ability }}
                    </label>
                    <label>
                        <checkbox value="other" />其他：
                        <input class="inputClass" v-if="selectedStrongAbilities.includes('other')" v-model="otherStrongAbility" placeholder="请填写具体本事" />
                    </label>
                </checkbox-group>
            </view>
            <!-- 5. 您手头有什么资源？ -->
            <view class="question">
                <view class="question-text">5、您手头有什么资源？（可多选+补充）</view>
                <checkbox-group @change="handleResourcesChange">
                    <label class="radioClass">
                        <checkbox value="offlineChannels" />线下渠道（门店/代理商等）→ 覆盖区域：
                        <input class="inputClass" v-if="selectedResources.includes('offlineChannels')" v-model="offlineChannelsRegion" placeholder="请填写覆盖区域" />
                    </label>
                    <label class="radioClass">
                        <checkbox value="richClients" />有钱客户（个人资产百万以上）→ 大约人数：
                        <input class="inputClass" v-if="selectedResources.includes('richClients')" v-model="richClientsCount" placeholder="请填写大约人数" />
                    </label>
                    <label class="radioClass">
                        <checkbox value="govRelations" />政府/国企关系 → 具体类型：
                        <input class="inputClass" v-if="selectedResources.includes('govRelations')" v-model="govRelationsType" placeholder="请填写具体类型" />
                    </label>
                    <label class="radioClass">
                        <checkbox value="onlineTraffic" />线上流量（社群/平台账号等）→ 粉丝量级：
                        <input class="inputClass" v-if="selectedResources.includes('onlineTraffic')" v-model="onlineTrafficFans" placeholder="请填写粉丝量级" />
                    </label>
                    <label class="radioClass">
                        <checkbox value="otherResources" />其他资源：
                        <input class="inputClass" v-if="selectedResources.includes('otherResources')" v-model="otherResourcesDetail" placeholder="请填写具体资源" />
                    </label>
                </checkbox-group>
            </view>
        </view>

        <!-- 三、团队配置 -->
        <view class="section">
            <view class="section-title">三、团队配置</view>
            <!-- 6. 您的团队情况 -->
            <view class="question">
                <view class="question-text">6. 您的团队情况：</view>
                <view>
                    <view>➤ 团队人数：</view>
                    <radio-group @change="handleTeamSizeChange">
                        <label class="radioClass" v-for="size in teamSizes" :key="size">
                            <radio :value="size" />{{ size }}
                        </label>
                    </radio-group>
                </view>
                <view>
                    <view>➤ 是否有策划过活动？</view>
                    <radio-group @change="handleActivityPlanningChange">
                        <label class="radioClass" v-for="option in activityOptions" :key="option">
                            <radio :value="option" />{{ option }}
                        </label>
                    </radio-group>
                </view>
            </view>
        </view>

        <!-- 四、健康行业经历 -->
        <view class="section">
            <view class="section-title">四、健康行业经历</view>
            <!-- 7. 您接触过健康领域吗？ -->
            <view class="question">
                <view class="question-text">7. 您接触过健康领域吗？</view>
                <radio-group @change="handleHealthExperienceChange">
                    <label class="radioClass">
                        <radio value="servedClients" />服务过健康客户 → 大约服务过：
                        <input class="inputClass" v-if="selectedHealthExperience === 'servedClients'" v-model="servedClientsCount" placeholder="请填写人数" />
                    </label>
                    <label class="radioClass">
                        <radio value="cooperatedAgencies" />合作过健康机构 → 合作过：
                        <input class="inputClass" v-if="selectedHealthExperience === 'cooperatedAgencies'" v-model="cooperatedAgenciesCount" placeholder="请填写家数" />
                    </label>
                    <label class="radioClass">
                        <radio value="newcomer" />完全小白但想试试
                    </label>
                </radio-group>
            </view>
        </view>

        <!-- 五、品牌认知 -->
        <view class="section">
            <view class="section-title">五、品牌认知</view>
            <!-- 8. 您对十蜂健康了解多少？ -->
            <view class="question">
                <view class="question-text">8. 您对十蜂健康了解多少？（可多选）</view>
                <checkbox-group @change="handleShifengHealthKnowledgeChange">
                    <label class="radioClass" v-for="knowledge in shifengHealthKnowledge" :key="knowledge">
                        <checkbox :value="knowledge" />{{ knowledge }}
                    </label>
                </checkbox-group>
            </view>
        </view>

        <!-- 六、合作意愿 -->
        <view class="section">
            <view class="section-title">六、合作意愿</view>
            <!-- 9. 如果您和十蜂健康合作，最吸引您的是哪些方面？ -->
            <view class="question">
                <view class="question-text">9、 如果您和十蜂健康合作，最吸引您的是哪些方面？</view>
                <textarea class="textareaClass" v-model="cooperationAttractions" placeholder="请填写吸引您的方面" />
            </view>
        </view>

        <!-- 七、合作支持 -->
        <view class="section">
            <view class="section-title">七、合作支持</view>
            <!-- 10. 如果您想加入十蜂健康，您最想得到哪方面的合作支持？ -->
            <view class="question">
                <view class="question-text">10、 如果您想加入十蜂健康，您最想得到哪方面的合作支持？</view>
                <textarea class="textareaClass" v-model="cooperationSupport" placeholder="请填写您想要的合作支持" />
            </view>
        </view>

        <button @click="submitSurvey">提交问卷</button>
    </view>
</template>

<script>
import {
	createFormRecord
} from "@/api/shop.js";
export default {
    data() {
        return {
            // 一、基本信息
            mainIndustries: ['医疗健康', '金融保险', '互联网/电商', '零售快消', '教育培训', '政府机构'],
            selectedMainIndustry: '',
            otherMainIndustry: '',
            workingYears: ['刚入门（1年内）', '1 - 3年', '3 - 5年', '老司机（5年+）'],
            selectedWorkingYears: '',
            jobTitle: '',
            jobLevels: ['执行层', '中层管理', '决策层'],
            selectedJobLevel: '',

            // 二、能力与资源
            strongAbilities: ['能说会道（沟通谈判）', '人脉广', '点子多（策划能力）', '执行力强', '行业知识深'],
            selectedStrongAbilities: [],
            otherStrongAbility: '',
            selectedResources: [],
            offlineChannelsRegion: '',
            richClientsCount: '',
            govRelationsType: '',
            onlineTrafficFans: '',
            otherResourcesDetail: '',

            // 三、团队配置
            teamSizes: ['1 - 10人', '10 - 50人', '50 - 100人', '100+'],
            selectedTeamSize: '',
            activityOptions: ['自己搞过', '需要总部支持'],
            selectedActivityPlanning: '',

            // 四、健康行业经历
            selectedHealthExperience: '',
            servedClientsCount: '',
            cooperatedAgenciesCount: '',

            // 五、品牌认知
            shifengHealthKnowledge: ['互联网医疗平台', '大健康行业', '精准医疗产业链平台', '健康数字管理平台', '完全不了解，但好奇'],
            selectedShifengHealthKnowledge: [],

            // 六、合作意愿
            cooperationAttractions: '',

            // 七、合作支持
            cooperationSupport: ''
        };
    },
    methods: {
        handleMainIndustryChange(e) {
            this.selectedMainIndustry = e.mp.detail.value;
        },
        handleWorkingYearsChange(e) {
            this.selectedWorkingYears = e.mp.detail.value;
        },
        handleJobLevelChange(e) {
            this.selectedJobLevel = e.mp.detail.value;
        },
        handleStrongAbilitiesChange(e) {
            this.selectedStrongAbilities = e.mp.detail.value;
        },
        handleResourcesChange(e) {
            this.selectedResources = e.mp.detail.value;
        },
        handleTeamSizeChange(e) {
            this.selectedTeamSize = e.mp.detail.value;
        },
        handleActivityPlanningChange(e) {
            this.selectedActivityPlanning = e.mp.detail.value;
        },
        handleHealthExperienceChange(e) {
            this.selectedHealthExperience = e.mp.detail.value;
        },
        handleShifengHealthKnowledgeChange(e) {
            this.selectedShifengHealthKnowledge = e.mp.detail.value;
        },
        submitSurvey() {
			if(!this.selectedMainIndustry || !this.selectedWorkingYears || !this.jobTitle || !this.selectedJobLevel || !this.selectedStrongAbilities || !this.selectedTeamSize || !this.selectedActivityPlanning || !this.selectedShifengHealthKnowledge.length || !this.cooperationAttractions || !this.cooperationSupport) return uni.$u.toast("请完善答题！");
            // 这里可以添加提交问卷数据到后端的逻辑
            const surveyData = {
                // 基本信息
                mainIndustry: this.selectedMainIndustry === 'other'? this.otherMainIndustry : this.selectedMainIndustry,
                workingYears: this.selectedWorkingYears,
                jobTitle: this.jobTitle,
                jobLevel: this.selectedJobLevel,
                // 能力与资源
                strongAbilities: this.selectedStrongAbilities.includes('other')? [...this.selectedStrongAbilities.filter(item => item!== 'other'), this.otherStrongAbility] : this.selectedStrongAbilities,
                resources: {
                    offlineChannels: this.offlineChannelsRegion,
                    richClients: this.richClientsCount,
                    govRelations: this.govRelationsType,
                    onlineTraffic: this.onlineTrafficFans,
                    otherResources: this.otherResourcesDetail
                },
                // 团队配置
                teamSize: this.selectedTeamSize,
                activityPlanning: this.selectedActivityPlanning,
                // 健康行业经历
                healthExperience: {
                    type: this.selectedHealthExperience,
                    count: this.selectedHealthExperience === 'servedClients'? this.servedClientsCount : this.selectedHealthExperience === 'cooperatedAgencies'? this.cooperatedAgenciesCount : null
                },
                // 品牌认知
                shifengHealthKnowledge: this.selectedShifengHealthKnowledge,
                // 合作意愿
                cooperationAttractions: this.cooperationAttractions,
                // 合作支持
                cooperationSupport: this.cooperationSupport
            };
			const params = {
				data : JSON.stringify(surveyData),
				type:'0'
			};
            console.log('提交的问卷数据:', surveyData);
			const result = createFormRecord(params);
            uni.showToast({
                title: '问卷提交成功',
                icon: 'success'
            });
        }
    }
};
</script>

<style scoped>
.survey-container {
    padding: 20px;
}

.survey-title {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
}

.section {
    margin-bottom: 20px;
}

.section-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

.question {
    margin-bottom: 15px;
}

.question-text {
    font-weight: bold;
    margin-bottom: 5px;
}

button {
    margin-top: 20px;
	background: #bbb;
}

.radioClass{
	display: block;
	margin-bottom: 20rpx;
}
.inputClass{
	border: 4rpx solid #bbb;
	border-radius: 16rpx;
	font-size: 28rpx;
	padding: 10rpx 20rpx;
	margin:10rpx 50rpx  ;
}
.textareaClass{
	height: 200rpx;
	border: 4rpx solid #bbb;
	border-radius: 16rpx;
	font-size: 28rpx;
	padding: 10rpx;
	resize: none;
}
</style>